<html>
<head>
<wicket:head>
<script>
	$(document).ready(function(){
		$("#imgSmall").tooltip({
				position:"center left",
				offset: [0, -20]
			});
	});
</script>
</wicket:head>
</head>
<body>
<wicket:panel>
						<form wicket:id="genForm">
	 					<div class="clearfix" style="margin-top:20px;width:600px;">
                        	<div style="float:left;">
                        		 <div>
                                    <h4 style="color:#999;">First Name</h4>
                                    <input wicket:id="fName" type="text" style="width:400px;margin:10px;" />
                                </div>
                                 <div>
                                    <h4 style="color:#999;">Last Name</h4>
                                    <input wicket:id="lName" type="text" style="width:400px;margin:10px;" />
                                </div>
                                <div>
                                    <h4 style="color:#999;">Contact Number</h4>
                                    <input wicket:id="phNo" type="text" style="width:400px;margin:10px;" />
                                </div>
                                <div>
                                    <h4 style="color:#999;margin-top:10px;">EMail</h4>
                                    <input wicket:id="email" type="text" style="width:400px;margin:10px;" />
                                </div>
                            </div>
                            <div style="float:right; border:1px solid #DEDDEF;">
                            	<div id="imgSmall">
                            		<img wicket:id="profileImage" style="width:150px; margin:5px;" src="dummyImages/marla150.jpg" />
                                </div>
                                <div class="tooltip">
                                	<img wicket:id="profileImagePreview" src="dummyImages/marla150.jpg" />
                                </div>
                                <div style="margin:5px 10px" class="clearfix">
                                	<form wicket:id="uploadForm">
                                		<div style="float:left;color:#999; font-weight:bold;">Change image:&nbsp;</div>
                                		<div style="float:left;" wicket:id="uploadImg">UploadPanelGoesHere!</div>
                                	</form>
                                </div>
                            </div>
                        </div>
						<div>
                        	<h4 style="color:#999;margin-top:20px;">Summary / About Me</h4>
                        	<div style="margin:10px;">
                            	<textarea wicket:id="abtMe" style="width:600px; height:200px;"></textarea>
                            </div>
                        </div>
                        <div>
                        	<div class="clearfix">
	                        	<h4 style="color:#999;margin-top:20px;float:left;">Expertise / Skills / Keywords</h4>
	                        	<div class="helpTip" style="float:left;margin-left:10px; margin-top:15px;"></div>
			       				<div class="tooltip" style="width:200px;">
			       					<p>Keywords give your profile more exposure during searches. With precise keywords, searches become more relevant.</p>
			       					<p>Please write relevant and smart keywords <strong>separated by comma</strong>.</p>
			       				</div>
			       				<div style="text-decoration: underline; padding-left:10px; margin-top:15px;float:left;">Please fill-in comma separated values.</div>
                        	</div>
                        	<span style="color:#666;"> e.g. Mechanical Engineering, robotics, professor, entrepreneur, nano-technology</span>
                        	<div style="margin:10px;">
                            	<input type="text" wicket:id="skills" style="width:600px;" />
                            </div>
                            
                        </div>
                        <div>
                        	<h4 style="color:#999;margin-top:20px;">Projects / Honors / Awards</h4>
                            <div style="margin:10px;">
                            	<textarea wicket:id="honors" style="width:600px; height:100px;"></textarea>
                            </div>
                        </div>
                        <div>
                        	<h4 style="color:#999;margin-top:20px;">Interests / Hobbies</h4>
                            <div style="margin:10px;">
                            	<textarea wicket:id="hobbies" style="width:600px; height:100px;"></textarea>
                            </div>
                        </div>
                        <div>
                        	<div style="margin:10px;">
                        		<button type="submit" class="es-button ui-state-default ui-corner-all">Save</button>
                        	</div>
                        </div>
                        </form>
</wicket:panel>
</body>
</html>